<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :title="computeTitle(type)"
    width="900px"
    :disabled="type === 'detail'"
  >
    <el-form :model="form" label-width="80px">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="方案名称">
            <el-input
              :readonly="type === 'detail'"
              placeholder="方案名称"
              v-model="mdl.evalSchemeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="私有模板">
            <el-checkbox :disabled="type === 'detail'" v-model="mdl.ownerUserId">是</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="mb0" v-show="type === 'detail'" label="创建人">{{ mdl.createUser }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            class="mb0"
            v-show="type === 'detail'"
            label="创建时间"
          >{{formatTime(mdl.createTime)}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <div v-show="type !== 'detail'">
      <el-select
        filterable
        v-model="value"
        :disabled="type === 'detail'"
        multiple
        @change="handleChange"
        class="mb20 mr20"
        style="width: 43%"
      >
        <el-option
          v-for="(item,index) in selectData"
          :key="index"
          :label="item.evalTypeName"
          :value="item.evalTypeId"
        />
      </el-select>
      <el-tooltip
        class="item"
        effect="light"
        content="下拉选择类型后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
        placement="top"
      >
        <i class="fs16 el-icon-warning-outline"></i>
      </el-tooltip>
      <x-transfer
        @postData="handlePostData"
        :titles="['待选考评项目', '已选考评项目']"
        :from="fromData"
        :to="toData"
        class="mt20"
        ref="xTransfer"
      />
    </div>
    <div v-show="type === 'detail'">
      <project-big ref="projectBig" />
    </div>

    <div slot="footer" v-if="type !== 'detail'">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="handleSure"
      >{{ type === 'add' || type === 'copyAdd' ? '新增' : '修改' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getEvalParent, schemeCreate, evalItemGet, schemeUpdate } from '@/api/eval'
import { openNotification } from '@/utils/util'
import XTransfer from '@/components/XTransfer'
import ProjectBig from './ProjectBig'

export default {
  components: {
    XTransfer,
    ProjectBig
  },
  data() {
    return {
      fromData: [], // 穿梭树数据
      toData: [],
      saveArr: [],
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1
      },
      selectData: [],
      form: {
        evalScheme: {
          evalSchemeName: null,
          ownerUserId: false
        },
        evalSchemeDetailedList: []
      },
      mdl: {
        evalSchemeName: null,
        ownerUserId: null,
        createUser: null,
        createTime: null
      },
      personal: false,
      isEdit: false,
      type: null,
      visible: false
    }
  },
  mounted() {
    getEvalParent().then(res => {
      console.log('res', res)
      this.selectData = res.data
    })
  },
  methods: {
    computeTitle(type) {
      let str = ''
      if (type === 'add') {
        str = '新增'
      } else if (type === 'copyAdd') {
        str = '复制新增'
      } else if (type === 'detail') {
        str = '详情'
      } else {
        str = '编辑'
      }
      return str
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      this.toData = [...arr]
    },
    async handleChange(val) {
      console.log('val', val)
      if (val.length > 0) {
        val.map(async v => {
          const res = await evalItemGet(v)
          console.log('res', res)
          let arr = res.data
          arr.map(v => {
            v.key = v.evalItemId
            v.label = v.evalItemName
          })
          console.log('arr', arr)

          this.$nextTick(() => {
            this.fromData = [...arr]
            this.saveArr = [...arr]
          })
        })
      } else {
        this.fromData = []
        this.saveArr = []
      }
    },
    edit(type, row) {
      this.value = []
      this.fromData = []
      console.log('row', row, type)

      this.visible = true
      this.type = type
      this.mdl = Object.assign({}, row)
      if (this.mdl.ownerUserId) {
        this.mdl.ownerUserId = true
      }
      if (type !== 'add') {
        let arr = [...row.evalSchemeDetailedList]
        arr.map(v => {
          v.key = v.evalItemId
          v.label = v.evalItemName
        })
        if (type === 'copyAdd') {
          this.$set(this.mdl, 'evalSchemeName', row.evalSchemeName + '-复制')
        }

        this.toData = [...arr]
        console.log('edit', type, row, this.toData)
        if (type === 'detail') {
          this.$nextTick(() => {
            this.$refs.projectBig.detail(row)
          })
        }
      }
      if (type === 'add') {
        this.toData = []
        this.$set(this.mdl, 'ownerUserId', false)
      }
    },
    async handleSure() {
      this.$refs.xTransfer.postToData()
      let arr = []
      this.toData.map(v => {
        arr.push({ evalItemId: v.key })
      })
      this.$set(this.form, 'evalSchemeDetailedList', arr)
      this.$set(this.form, 'evalScheme', this.mdl)

      console.log('param', this.form)
      let res = ''
      let mes = ''
      if (this.type === 'add' || this.type === 'copyAdd') {
        res = await schemeCreate(this.form)
        mes = '新增操作成功'
      } else {
        res = await schemeUpdate(this.form)
        mes = '修改操作成功'
      }
      console.log('res', res)
      if (res.state === '000000') {
        openNotification('success', mes)
        this.visible = false
        this.$emit('refresh')
      }
    }
  }
}
</script>
